<template>
  <div>
    <div>订单审批</div>
    <hr/>
    <el-table
      :data="sujv"
      style="width: 100%">
      <el-table-column type="expand" label="详情">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="图片">
              <img :src="props.row.null3" alt="">
            </el-form-item>
            <el-form-item label="描述">
              <span v-html="props.row.null1"></span>
            </el-form-item>
            <el-form-item label="名称">
              <span v-html="props.row.null2"></span>
            </el-form-item>
            <el-form-item label="产品编码">
              <span v-html="props.row.null4"></span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="客户编码">
        <template slot-scope="scope">
          <span>{{ scope.row.activitiesId }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="订单号">
        <template slot-scope="scope">
          <span>{{ scope.row.orderNo }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.orderTime }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="金额">
        <template slot-scope="scope">
          <span>{{ scope.row.productName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="审核状态">
        <template slot-scope="scope">
          <span>{{ scope.row.checkStatus }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="交易状态">
        <template slot-scope="scope">
          <span>{{ scope.row.dealStatus }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="交易操作">
        <template slot-scope="scope">

          <el-button size="mini" type="success" @click="tongguo(scope.$index, scope.row)">
            通过
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5,10,15]"
      :page-size="currentPage4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="zpage">
    </el-pagination>

    <!--@size-change这个是下拉变动后触发一个事件-->
    <!--@current-change页码被点击或切换触发的一个事件-->
    <!--current-page当前显示是哪一页的数据-->
    <!--page-size这是那一页?-->
  </div>
</template>

<script>
export default {
  name: 'HelloVue',
  data () {
    return {
      sujv: [],
      sujv2: [],
      currentPage4: 5,
      page: 1,
      zpage: 1,
      multipleSelection: [],
      a: [],
      b: []

    }
  },
  created: function () {
    var that = this
    this.$axios.post('order/orderSearchByExamine', {
      page: this.page,
      limit: this.currentPage4,
      dealStatus: '待发货',
      userId: this.$store.getters.getUserInfo.userId
    }).then(function (res) {
      that.sujv = res.data.data
      that.zpage = Math.ceil(res.data.count)
      window.console.log('w')
      window.console.log(res)
      for (var i = 0; i < that.sujv.length; i++) {
        that.sujv[i].orderTime = that.formatDate(new Date(that.sujv[i].orderTime))
        for (var j = 0; j < that.sujv[j].productInfo.length; j++) {
          that.sujv[i].null1 += that.sujv[i].productInfo[j].productDescribe + '<br/>'
          that.sujv[i].null2 += that.sujv[i].productInfo[j].productName + '<br/>'
          that.sujv[i].null3 += that.sujv[i].productInfo[j].imageUrl + '<br/>'
          that.sujv[i].null4 += that.sujv[i].productInfo[j].orderNo + '<br/>'
        }
      }
      that.zpage = Math.ceil(res.data.count)
      window.console.log('res6')
    })
  },
  methods: {
    tongguo (index, row) {
      window.console.log('row.orderNo')
      this.$axios.post('order/orderExamine', {
        dealerId: 1,
        orderNo: row.orderNo
      }).then((res) => {
        window.console.log(this.$store.getters.getCompany.dealerId)
        if (res.data.code === 200) {
          window.console.log('row.orderNo')
          this.$axios.post('order/orderSearchByExamine', {
            page: this.page,
            limit: this.currentPage4,
            dealStatus: '待发货',
            userId: this.$store.getters.getUserInfo.userId
          }).then((res) => {
            window.console.log('row.orderNo1')
            this.sujv = res.data.data
            this.zpage = Math.ceil(res.data.count)
            window.console.log(res)
            for (var i = 0; i < this.sujv.length; i++) {
              this.sujv[i].orderTime = this.formatDate(new Date(this.sujv[i].orderTime))
              for (var j = 0; j < this.sujv[j].productInfo.length; j++) {
                this.sujv[i].null1 += this.sujv[i].productInfo[j].productDescribe + '<br/>'
                this.sujv[i].null2 += this.sujv[i].productInfo[j].productName + '<br/>'
                this.sujv[i].null3 += this.sujv[i].productInfo[j].imageUrl + '<br/>'
                this.sujv[i].null4 += this.sujv[i].productInfo[j].orderNo + '<br/>'
              }
            }
            window.console.log('res1')
            this.zpage = Math.ceil(res.data.count)
          })
        }
      })
    },

    handleSizeChange (newsize) {
      window.console.log(newsize)
      this.currentPage4 = newsize
      var that = this
      this.$axios.post('order/orderSearchByExamine', {
        page: this.page,
        limit: this.currentPage4,
        userId: this.$store.getters.getUserInfo.userId
      }).then(function (res) {
        that.sujv = res.data.data
        that.zpage = Math.ceil(res.data.count)
        window.console.log(res)
        for (var i = 0; i < that.sujv.length; i++) {
          that.sujv[i].orderTime = that.formatDate(new Date(that.sujv[i].orderTime))
          for (var j = 0; j < that.sujv[j].productInfo.length; j++) {
            that.sujv[i].null1 += that.sujv[i].productInfo[j].productDescribe + '<br/>'
            that.sujv[i].null2 += that.sujv[i].productInfo[j].productName + '<br/>'
            that.sujv[i].null3 += that.sujv[i].productInfo[j].imageUrl + '<br/>'
            that.sujv[i].null4 += that.sujv[i].productInfo[j].orderNo + '<br/>'
          }
        }
        that.zpage = Math.ceil(res.data.count)
      })
    },
    handleCurrentChange (newpage) {
      window.console.log(newpage)
      this.page = newpage
      var that = this
      this.$axios.post('order/orderSearchByExamine', {
        page: this.page,
        limit: this.currentPage4,
        userId: this.$store.getters.getUserInfo.userId
      }).then(function (res) {
        that.sujv = res.data.data
        that.zpage = Math.ceil(res.data.count)
        window.console.log(res)
        for (var i = 0; i < that.sujv.length; i++) {
          that.sujv[i].orderTime = that.formatDate(new Date(that.sujv[i].orderTime))
          for (var j = 0; j < that.sujv[j].productInfo.length; j++) {
            that.sujv[i].null1 += that.sujv[i].productInfo[j].productDescribe + '<br/>'
            that.sujv[i].null2 += that.sujv[i].productInfo[j].productName + '<br/>'
            that.sujv[i].null3 += that.sujv[i].productInfo[j].imageUrl + '<br/>'
            that.sujv[i].null4 += that.sujv[i].productInfo[j].orderNo + '<br/>'
          }
        }
        that.zpage = Math.ceil(res.data.count)
      })
    }
  }
}
</script>
<style>
  span {
    margin-right: 20px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    color: #99a9bf;

  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;

  }
</style>
